<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Array</title>
</head>

<body>
  <script>
    //创建数组
    //1.数组构造函数
    let c1 = new Array();
    let c2 = new Array(20);
    let c3 = new Array("red", "blue", "green");
    //2.数组字面量
    let c4 = ["red", "blue", "green"];
    let c5 = [];
    let c6 = [1, 2,];
    //Array.from
    console.log(Array.from("Matt"));// ['M', 'a', 't', 't']
    const m = new Map().set(1, 2).set(3, 4);
    const s = new Set().add(1).add(2).add(3).add(4);
    console.log(Array.from(m));//[[1,2],[3,4]]
    console.log(Array.from(s));//[1,2,3,4]

    const a1 = [1, 2, 3, 4];
    const a2 = Array.from(a1);
    console.log(a1 === a2);//false,Array.from进行的是浅拷贝.

    const iter = {
      *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
        yield 4;
      }
    }
    console.log(Array.from(iter));//[1,2,3,4]

    function getArgsArray() {
      return Array.from(arguments);
    }
    console.log(getArgsArray(1, 2, 3));//[1,2,3]

    const a3 = Array.from(a1, x => x ** 2);
    console.log(a3);//[1,4,9,16]

    console.log(Array.of(3, 4, 5, 6));//[3,4,5,6]
    const options = [, , , , ,];
    console.log(options.length);//5
    for (const option of options) {
      console.log(option === undefined)
    }
    console.log(options.map(() => 6));
    console.log(options.join("-"));//----

    //数组索引
    let colors = ["red", "green", "blue"];
    let names = [];
    console.log(colors.length, names.length);//3,0
    colors.length = 2;
    console.log(colors[2]);//undefined,数组长度为2,没有索引2
    //数组的检测
    if (Array.isArray(colors)) {
      console.log("它是数组!")
    }

    //迭代器方法
    const a = ["foo", "bar", "baz", "qux"];
    const akeys = Array.from(a.keys());
    const aValues = Array.from(a.values());
    const aEntries = Array.from(a.entries());
    console.log(akeys, aValues, aEntries);
    //ES6解构在循环中拆分键值对.
    for (const [idx, element] of a.entries()) {
      console.log(idx);
      console.log(element);
    }
    //fill()
    const zeros = [0, 0, 0, 0, 0];
    zeros.fill(5);
    console.log(zeros);//[5,5,5,5,5]
    //用6填充索引>=3的元素
    zeros.fill(6, 3);
    console.log(zeros);//[5,5,5,6,6]
    zeros.fill(0);
    //用7填充索引>=1而且<3的元素.
    zeros.fill(7, 1, 3);
    console.log(zeros);//[0,7,7,0,0]
    zeros.fill(0);
    //用8填充索引>=1且<4的元素;负索引可以看作是数组长度加上负索引
    zeros.fill(8, -4, -1); //(8,1,4)
    console.log(zeros);//[0,8,8,8,0]
    zeros.fill(0);
    //索引过高过低或反向都会静默失败
    zeros.fill(1, -10, -6);
    zeros.fill(1, 10, 15);
    zeros.fill(1, 4, 2);
    zeros.fill(4, 3, 10)
    console.log(zeros);//[0,0,0,4,4]
    //copyWithin()
    let ints, reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    reset();
    //从0开始,插入到索引为5的位置.
    ints.copyWithin(5);
    console.log(ints);// [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
    reset();
    //从5开始,插入到索引0的位置
    ints.copyWithin(0, 5);
    console.log(ints);//[5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
    reset();
    //从0到3(不包含3)的内容插入到索引4的位置
    ints.copyWithin(4, 0, 3);
    console.log(ints);//[0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
    reset();
    //负索引可以转换为正索引,数组长度加负负索引[-4,-7,-3] => [6,3,7]
    ints.copyWithin(-4, -7, -3);
    console.log(ints);//[0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

    //转换方法
    let colors1 = ["red", "blue", "green"];
    // alert(colors1.toString());//
    // alert(colors1.valueOf());//
    // alert(colors1);//

    //toString(),toLocaleString()区别
    let person1 = {
      toLocaleString() {
        return "locale";
      },
      toString() {
        return "string";
      }
    }

    let person2 = {
      toLocaleString() {
        return "locale";
      },
      toString() {
        return "string";
      }
    }

    // 
    let people = [person1, person2];
    // alert(people);  string string
    console.log(people.toString());//string,string
    console.log(people.toLocaleString());//locale,locale.
    //栈方法
    let colors2 = new Array();
    let count = colors2.push("red", "blue");
    console.log(count, colors2);//2
    let count1 = colors2.unshift("pink");//开头添加元素
    console.log(count1, colors2);//["pink","red","blue"]
    let item = colors2.shift();//开头删除
    console.log(item, colors2);//["red","blue"];
    // reveres()和sort()
    let val = [1, 2, 3, 4, 5];
    val.reverse();
    console.log(val);//[5,4,3,2,1]
    function compare(val1, val2) {
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        return 0;
      }
    }
    // val.sort((a, b) => b - a);  简写形式
    val.sort(compare);//传入比较函数
    console.log(val);

    let col = ["red", "green", "blue"];
    let newColors = ["black", "brow"];
    let moreNewColors = {
      // 强制打平类数组
      [Symbol.isConcatSpreadable]: true,
      length: 2,
      0: "pink",
      1: "cyan"
    }
    newColors[Symbol.isConcatSpreadable] = false; //不打平数组.
    let col1 = col.concat("yello", newColors);
    console.log(col1);
    let col3 = col.concat(moreNewColors);
    console.log(col3);
    //slice()
    let num1 = [1, 2, 3, 4, 5, 6];
    let n1 = num1.slice(1), n2 = num1.slice(1, 3), n3 = num1.slice(-1);
    console.log(n1, n2, n3);
    //splice()
    num1.splice(0, 1);
    console.log(num1);
    num1.splice(1, 0, 77, 88);
    console.log(num1); //[2, 77, 88, 3, 4, 5, 6]
    //indexOf(),lastIndexOf()
    console.log(num1.indexOf(3));//3
    console.log(num1.lastIndexOf(77));//1
    console.log(num1.includes(88));//true
    //断言函数
    const p = [
      {
        name: "Matt",
        age: 27
      },
      {
        name: "lishilong",
        age: 29
      }
    ]
    console.log(p.find((ele, index, arr) => ele.age < 28));//{name: 'Matt', age: 27}
    console.log(p.findIndex((ele, index, arr) => ele.age < 28));//0
    const evens = [2, 4, 6];
    evens.find((element, index, arr) => {
      console.log(element);
      console.log(index);
      console.log(arr)
      return element === 4;
    })
    //every()和some()
    let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let everyRes = numbers.every((item, index, arr) => item > 2);
    console.log(everyRes);//false;
    let someRes = numbers.some((item, index, arr) => item > 2);
    console.log(someRes);//true
    //filter(),筛选指定条件的值
    let filterRes = numbers.filter((item, index, arr) => item > 2);
    console.log(filterRes);//[3,4,5,4,3]
    //map(),返回每次调用结果所构成的数组
    let mapRes = numbers.map((item, index, arr) => item * 2);
    console.log(mapRes);
    //forEach():没有返回值.
    numbers.forEach((item, index, arr) => {
      var double = item * 2;
      console.log(double);
    })

    //reduce()
    let values = [1, 2, 3, 4, 5];
    //第一次执行归并操作,prev是1,cur是2;
    //第二次执行归并操作,prev是3,cur是3;依次类推,最后得到15.
    //reduceRight()只是方向相反. prev为5,cur是4,直到归并到1.
    let sum = values.reduce((prev, cur, index, arr) => prev + cur);
    console.log(sum);//15
  </script>
</body>

</html>